<template>
  <!--理财功能/产品导航-->
  <div :class="className">
    <van-grid :column-num="menuList.length" :border="false">
      <van-grid-item v-for="(item, index) in menuList" :key="'subMenu' + index">
        <router-link :to="item.url" tag="div" class="tc" @click.native="toUrl(item)">
          <!-- <van-image :src="require(`../assets/images/${item.menuIcon}`)"></van-image> -->
          <img class="grid_img" :src="require(`../assets/images/${item.menuIcon}`)"/>
          <p class="image_text">{{item.name}}</p>
        </router-link>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import {
  Grid,
  GridItem,
  Image as VanImage,
} from 'vant';
import tracking from '@/utils/tracking.js';

export default {
  name: 'productGrid',
  mixins: [
    tracking
  ],
  components: {
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [VanImage.name]: VanImage,
  },
  props: ['className', 'menuList', 'columnNum', 'serverCacheKey'],
  serverCacheKey: (props) => {
    return props.serverCacheKey;
  },
  methods: {
    toUrl(item) {
      // TD埋点 CNZZ埋点
      this.buryEventPoint('H5-SYCPDH-EVENT', item.name);
      this.buryEventPointCNZZ('H5-SYCPDH-EVENT', item.name);
    }
  }
};
</script>

<style lang="less" scoped>
/*理财产品导航*/
.finance_product_nav {
  background-color: #1f6aff;
  font-size: 13px;
  color: #fff;
  .van-grid {
    .van-grid-item__content {
      .grid_img{
        width: 66px;
        height: 66px;
      }
      .image_text {
        margin-top: -15px;
        margin-bottom: 10px;
        letter-spacing: 0.57px;
        text-align: center;
      }
    }
  }
}
/*理财功能导航*/
.finance_func_nav {
  margin: 0 -10px 0 -10px;
  font-size: 12px;
  color: #666;
  .van-grid-item__content {
    padding: 0 0 15px 0;
    // .van-image__img {
    .grid_img{
      width: 40px;
      height: 40px;
    }
    .image_text {
      margin-top: 2px;
      letter-spacing: 0.52px;
    }
  }
}
/*基金集合页理财功能导航*/
.finance_func_nav.fund_finance_nav{
  margin: 0;
  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.05);
}
/*理财资产功能导航*/
.finan_func_nav {
  font-size: 12px;
  color: #666;
  .van-grid-item__content {
    .grid_img{
      width: 36px;
      height: 36px;
    }
    .image_text {
      margin-top: 2px;
      letter-spacing: 0.52px;
    }
  }
}
</style>